<!DOCTYPE html>
<html>
<head>
    <title>情报板设计</title>
    <script src="/assets/jquery/jquery-3.1.1.min.js"></script>
    <script src="/assets/layui-2.9.18/layui.js"></script>
    <link rel="stylesheet" href="/assets/layui-2.9.18/css/layui.css">
    <link rel="stylesheet" href="/assets/layui-2.9.18/css/admin.css">
    <script src="/assets/september/common.js"></script>
    <script src="/assets/september/htmlBuilder.js"></script>
    <script src="/assets/september/search.js"></script>
    <link rel="stylesheet" href="/assets/pages/list.css">
    <link rel="stylesheet" href="/assets/pages/form.css?1">
    <style>
        table {
            width: 100%;
        }

        td {
            height: 30px;
            font-size: 18px;
            border-bottom: rgb(128, 128, 128) 1px solid;
        }

        input[name='sequence'] {
            width: 30px;
        }

        a {
            color: #0000FF;
            text-underline: #00F7DE;
            cursor: pointer;
        }

        .area {
            cursor: pointer;
        }

        .led-init {
            background-color: #000000;
            color: red;
            width: 320px;
            height: 160px;
            font-size: 20px;
            margin: 10px;
        }

        input {
            padding-left: 10px;
            height: 30px;
            width: 50px;
        }
    </style>
</head>
<body style="padding: 20px">
<div style="float: left;width: 15%;height: 600px">
    <h3>节目名称:${flash.flashName}</h3>
    <h5>尺寸: (${flash.x},${flash.y},${flash.w},${flash.h})</h5>

    <div style="padding-bottom: 10px">
        <button class="layui-btn layuiadmin-btn-list" onclick="addArea()">新增区域</button>
        <button class="layui-btn layuiadmin-btn-list" onclick="viewFlash()">整体预览</button>
    </div>

    <table id="LAY-app-content-list" class="layui-table">
        <tr>
            <td><span>id</span></td>
            <td><span>操作</span></td>
        </tr>
        <tbody class="layui-table-body layui-table-main">
        <tr class="data_row" style="display: none">
            <td><span>$[id]</span></td>
            <td>
                <a class="link" onclick="editArea(this,$[id])">编辑</a>
                <a class="link" onclick="deleteArea($[id])">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="layui-form" style="padding: 20px 20px 0 20px;width: 80%;float: right" id="edit">
    <div>
        <label for="width">宽度: </label>
        <input type="number" id="width" value="320" onblur="adjustWidth()">
        <label for="height">高度: </label>
        <input type="number" id="height" value="160" onblur="adjustHeight()">
        <label for="fontSize">字体大小: </label>
        <input type="number" id="fontSize" value="20" onblur="adjustFontSize()">
        <label>文字颜色: </label>
        <input type="radio" name="color" title="红" lay-filter="color" lay-skin="primary"
               class="layui-input" value="red" checked>
        <input type="radio" name="color" title="黄" lay-filter="color" lay-skin="primary"
               class="layui-input" value="yellow">
        <input type="radio" name="color" title="绿" lay-filter="color" lay-skin="primary"
               class="layui-input" value="green">
        <label>对齐方式: </label>
        <input type="radio" name="textAlign" title="左" lay-filter="textAlign" lay-skin="primary"
               class="layui-input" value="left" checked>
        <input type="radio" name="textAlign" title="中" lay-filter="textAlign" lay-skin="primary"
               class="layui-input" value="center">
        <input type="radio" name="textAlign" title="右" lay-filter="textAlign" lay-skin="primary"
               class="layui-input" value="right">

        <button class="layui-btn layuiadmin-btn-list" onclick="saveArea()">保存</button>



    </div>
    <hr>
    <textarea id="content" style="height: 100px;width:400px;margin: 10px" onblur="adjustContent()">PLATE,您已超载</textarea>

    <hr>
    <div>
        <div id="led" class="led-init"></div>
    </div>
    

</div>
<hr>


<script>
    let currentId;

    layui.config({
        base: '../../../assets/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'table'], function () {

        let form = layui.form;
        form.on("radio(color)", function (data) {
            let color = data.value;
            $('#led').css('color', color)

        });
        form.on("radio(textAlign)", function (data) {
            console.log(data)
            let textAlign = data.value;
            $('#led').css('text-align', textAlign)

        });
        getLedAreaList()
        $('.layui-form-radio').css('margin', 0)

    });

    function adjustHeight() {
        let height = $('#height').val()
        $('#led').css('height', height)
    }

    function adjustWidth() {
        let width = $('#width').val()
        $('#led').css('width', width)
    }

    function adjustFontSize() {
        let fontSize = $('#fontSize').val() + "px"
        $('#led').css('font-size', fontSize)
    }



    function adjustContent() {
        let content = $('#content').val()
        let plateNumber = $('#plateNumber').val()
        if (plateNumber) {
            content = content.replace('PLATE', plateNumber)
        }
        content = content.replaceAll(new RegExp("\n", 'g'), "<br/>")
        // content = content.replaceAll(new RegExp("\s", 'g'), "　")
        content = content.replaceAll(new RegExp("\s", 'g'), "&nbsp;")

        console.log(content)
        $('#led').html(content)
    }

    function addArea() {
        sajax({
            type: "POST",
            url: '/led/addArea',
            data: {flashId: '${flash.id}'},
            dataType: 'json',
            success: function (data) {
                getLedAreaList()
            }
        });
    }


    function saveArea() {

        let width = $('#width').val();
        let height = $('#height').val();
        let fontSize = $('#fontSize').val();
        let content = $('#content').val();
        let color = $('input[name="color"]:checked').val();
        let textAlign = $('input[name="textAlign"]:checked').val();
        let data = {
            id: currentId,
            flashId:${flash.id},
            'width': width,
            'height': height,
            'fontSize': fontSize,
            'content': content,
            'color': color,
            'textAlign': textAlign,
        }
        console.log(data)
        sajax({
            type: "POST",
            url: '/led/updateArea',
            data: data,
            dataType: 'json',
            success: function () {
                getLedAreaList()
            }
        });
    }

    function getLedAreaList() {
        sajax({
            type: "POST",
            url: '/led/listArea',
            data: {id: ${flash.id}},
            dataType: 'json',
            success: function (data) {
                console.log(data)
                if (data.length > 0) {
                    $('#edit').css('display', 'block')
                    buildHtmlWithJsonArray('data_row', data, false, false);
                    //选中第一个
                    $($('tr')[2]).css('background', 'gray')
                    getArea(data[0].id)
                } else {
                    layer.msg('节目单为空')
                    $('#edit').css('display', 'none')
                    buildHtmlWithJsonArray('data_row', data, false, false);

                }
            }
        });
    }

    function editArea(e, id) {
        $('tr').each(function () {
            $(this).css('background', 'none')
        })
        $(e).parent().parent().css('background', 'gray')
        currentId = id
        getArea(id)

    }

    function deleteArea(id) {
        layer.confirm('确定要删除该条数据吗？', {
            btn: ['是', '否']
            //按钮
        }, function (index) {
            layer.close(index);
            sajax({
                type: "POST",
                url: '/led/deleteArea',
                data: {id: id},
                dataType: 'json',
                success: function (data) {
                    console.log(data)
                    getLedAreaList();
                }
            });
        }, function (index) {
            layer.close(index);

        });
    }

    function getArea(id) {
        sajax({
            type: "POST",
            url: '/led/getArea',
            data: {id: id},
            dataType: 'json',
            success: function (data) {
                console.log(data)
                $('#width').val(data.width)
                $('#height').val(data.height)
                $('#fontSize').val(data.fontSize)
                $('#content').val(data.content)
                // console.log( $('input[value="'+data.color+'"]'))
                $('input[value="' + data.color + '"]').click()
                $('input[value="' + data.textAlign + '"]').click()
                $('#led').css('color', data.color)
                $('#led').css('text-align', data.textAlign)
                layui.form.render()
                $('.layui-form-radio').css('margin', 0)

                adjustHeight();
                adjustWidth();
                adjustFontSize();
                adjustContent()
                currentId = id;
            }
        });
    }

    function viewFlash() {
        let w = ${flash.w} + ${flash.x}
        let h = ${flash.h} + ${flash.y}
        let screenWidth = w + 150 + "px"
        let screenHeight = h + 280 + "px"
        layer.open({
            type: 2,
            title: '预览情报板',
            area: [screenWidth, screenHeight],
            content: '/led/viewFlash?id=${flash.id}'
        });
    }
</script>

</body>
</html>
